<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE HTML>
<html>
<head>
    <base href="${ctx }/">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" href="plugin/bootstrap-table/dist/bootstrap-table.css">
    <!-- <link rel="stylesheet" href="css/zoom.css" media="all" />  -->
    <link rel="stylesheet" href="alert/alert.css">
     <style type="text/css">
        a{
        color: #73879C;
        }
    </style>
</head>
<body>

        <div>
            <ul class="breadcrumb">
                <li>
                    <i class="icon-home home-icon"></i>
                    <a href="javascript:void(0)">Driver Management(司机管理)</a>
                </li>
                <li class="active">
                    <a href="view/driver/mileage.jsp">Driver Job Acceptance Radius(司机接单里程列表)</a>
                </li>
            </ul>
        </div>
             <div class="form-inline" role="form" method="post" id="queryForm">
               
                <div class="form-group">
                    <label>Driver Phone(司机电话):</label>
                    <input type="text" id="telephone" placeholder="phone number" class="form-control">
                </div>
                 <div class="form-group">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="queryBtn" onclick="doQuery1('demo-table',queryParams1())" class="btn btn-primary">搜索
                </button>
                </div>
                </div>
              <!-- 
               <div class="form-group">
                    <label>注册时间:</label>
                    <input type="text" class="form-control input-append form_date" id="startTime">-
                    <input type="text" class="form-control input-append form_date" id="endTime">
                </div>
               <div class="form-group">
                    <label>账号状态:</label>
                    <select id='isOnline' class="form-control">
                        <option value="">全部</option>
                        <option value="1">在线</option>
                        <option value="2">离线</option>
                    </select>
                </div>
                   <div class="form-group">
                    <label>状态:</label>
                    <select id='isDeleted' class="form-control">
                        <option value="">全部</option>
                        <option value="0">启用</option>
                        <option value="1">禁用</option>
                    </select>
                </div>
                    <div class="form-group">
                    <label>性别:</label>
                    <select id='sex' class="form-control">
                        <option value="">全部</option>
                        <option value="0">male</option>
                        <option value="1">female</option>
                        <option value="2">other</option>
                    </select>
                </div>
                <input type='hidden' id="sortName" />
                 <div class="form-group">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="queryBtn" onclick="doQuery1('demo-table',queryParams1())" class="btn btn-primary">搜索
                </button>
                <button id="queryBtn" onclick="exportTable()" class="btn btn-primary">导出
                </button>
                </div>	
            </div> -->
        <br>
        <p id="onLineNum" style='text-align: center;color: red;'></p>
    <table id="demo-table"></table>
   
</body>

<!-- 加载需要的js -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="js/jquery-bootstrap-pagination.js"></script>
<script src="plugin/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src='alert/alert.js'></script>
<!--时间  -->
<script src="js/bootstrap-datetimepicker.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/common.js"></script>
<script src="plugin/layer/layer.js"></script>
<script type="text/javascript" charset="utf-8">

    $('.form_date').datetimepicker({
        minView: "month", //选择日期后，不会再跳转去选择时分秒
        language: 'zh-CN',
        format: 'dd/mm/yyyy',
        todayBtn: 1,
        autoclose: 1,
    });

    $(function () {
        initPath("${ctx }");
        initTable('demo-table', queryParams, columns, "user/getReceiveMileage");
    });
  

    var columns = [{field: '', title: 'Choose', checkbox: true},
        {
            field: 'id',
            title: 'Operation(操作)',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                return '<a style="margin-left:5px;color:#03A9F4" style="margin-left:5px" href="javascript:void(0)" onclick="add('+value+')">Gift feedback record</a>';
            }
        },
        {
            field: 'firstName',
            title: 'Driver Name(司机名称)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'telephone',
            title: 'Driver Phone(司机电话)',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
            	return "04"+value;
            }
        },
        {
            field: 'mileage',
            title: 'Distance (KM)(公里)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'giving_feedback',
            title: 'Notes(备注)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'giving_feedback1',
            title: 'Oil Service Payout(是否送礼)',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
            	var str="<span style='coloe:blue'>No</span>";
            	if(row.giving_feedback!=null&&row.giving_feedback!=""){
            		str="<span style='coloe:blue'>Yes</span>";
            	}
                return str;
            }
        }
    ];
  //扣款确认
	 function save(){
		var forms= serialize('forms');//扣款表单
		var data=JSON.stringify(forms);
		if(data.giving_feedback==""){
			lasyer.msg("Notes cannot be empty");
			return;
		}
		console.log("forms="+data);
		 $.ajax({
				type:'post',
				url:"user/giftGivingRecords",
				 data: data,
		         contentType:"application/json;charset=UTF-8", 
		         dataType:"json",
		         success: function(data){   
		        	 if(data.code==200){
		        		 layer.closeAll();
		        		 doQuery1('demo-table',queryParams());
		        	       }else{
		        	    	    layer.msg(data.msg);
		        	       }
		         }
			});
	 }
    function add(id){
    	var str="<form class=\"form-horizontal\" id='forms'><table style='margin-top:10px;margin-left:10px'>"
    		  +"  <tr class=\"padtr\" ><td class=\"pad\" >Notes:</td> "
    		  +" <td ><input type='hidden' name='id' value='"+id+"' id='id'/><textarea id=\"giving_feedback\" name=\"giving_feedback\"  rows=\"8\" cols=\"20\"></textarea></td></tr> "
    		  +"<tr align=\"center\" class=\"padtr\"><td colspan=\"5\"><button type=\"button\" onclick=\"save()\" class=\"btn btn-info btn1\">&nbsp;Save&nbsp;&nbsp;</button>"
    		+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
    		+"<button type=\"button\" onclick=\"cacel()\" class=\"btn btn-info btn1\">&nbsp;&nbsp;Cancel&nbsp;&nbsp;</button></td></tr>"
    		+"</table></form>";
    		layer.open({
    			  type: 1,
    			  title: '',
    			  skin: 'layui-layer-rim', //加上边框
    			  area: ['320px', '260px'], //宽高
    			  content:str
    			  });
    }
    
    function queryParams(params) {
        var param = {
        	telephone:$('#telephone').val(),
            pageNo: this.pageNumber,
            pageSize: this.pageSize
        }
        return param;
    }
    function queryParams1() {
        var param = {
        		telephone:$('#telephone').val(),
            pageNo: 1,
            pageSize: this.pageSize
        }
        return param;
    }

   
</script>
</html>


